
		<section class="flex flex-col gap-4 rounded-xl bg-slate-200 dark:bg-opacity-50 dark:bg-slate-700 p-4 w-full">
			<h3 class="mb-4 text-2xl font-bold tracking-tight text-black dark:text-white md:text-4xl">
				Most Popular
			</h3>

			<a
				class="w-full text-gray-900 hover:text-yellow-600 hover:no-underline dark:text-gray-100 dark:hover:text-yellow-100"
				href="/welcome"
				><div class="w-full">
					<div class="flex flex-col justify-between md:flex-row">
						<h4 class="mb-2 w-full flex-auto text-lg font-bold md:text-xl">Welcome to swyxkit!</h4>
					</div>
					<p
						class="ml-8 text-gray-600  hover:text-yellow-600 dark:text-gray-400 dark:hover:text-yellow-100"
					>
						This is swyx's preferred starter for Svelte projects!
					</p>
				</div></a
			>
			<a
				class="w-full text-gray-900 hover:text-yellow-600 hover:no-underline dark:text-gray-100 dark:hover:text-yellow-100"
				href="/moving-to-a-github-cms"
				><div class="w-full">
					<div class="flex flex-col justify-between md:flex-row">
						<h4 class="mb-2 w-full flex-auto text-lg font-bold md:text-xl">
							Moving to a GitHub CMS
						</h4>
					</div>
					<p
						class="ml-8 text-gray-600  hover:text-yellow-600 dark:text-gray-400 dark:hover:text-yellow-100"
					>
						The most popular (optional!) decision of SwyxKit!
					</p>
				</div></a
			>
			<a
				class="w-full text-gray-900 hover:text-yellow-600 hover:no-underline dark:text-gray-100 dark:hover:text-yellow-100"
				href="/the-url-as-state-manager"
				><div class="w-full">
					<div class="flex flex-col justify-between md:flex-row">
						<h4 class="mb-2 w-full flex-auto text-lg font-bold md:text-xl">
							The URL as a State Manager
						</h4>
					</div>
					<p
						class="ml-8 text-gray-600  hover:text-yellow-600 dark:text-gray-400 dark:hover:text-yellow-100"
					>
						Notice that the URL changes as you filter and search on this page.
					</p>
				</div></a
			>
		</section>